<template>
  <div class="attention">
    <ul class="newList">
      <router-link to="/detail" tag="li">
        <div class="mainTop">
          <img src="../../../assets/band/jiyisuipian.jpg" alt="" />
          <div>
            <p>记忆碎片</p>
            <span>02-20 11：23</span>
          </div>
          <button>已关注</button>
        </div>
        <div class="mainButton">
          <p>我发布了一个新视频，快来看看吧</p>
          <img src="../../../assets/band/jiyisuipian.jpg" alt="" />
        </div>
      </router-link>
    </ul>
    <Footer></Footer>
  </div>
</template>

<script>
//引入footer组件
import Footer from "../../../components/footer/Footer";
/* import { loadProducts } from "../../../api/products";
import { loadProductDetail } from "../../../api/products"; */
export default {
  name: "App",
  
  components: {
    Footer
  },
  methods: {
   /*  async show(){
      await loadProducts(1)
    },
    async goodDetail() {
     await loadProductDetail(this.$route.query.id);
    }, */
  },
};
</script>

<style lang="scss" scoped>
.attention {
  .mainTop {
    width: 100%;
    height: 80px;
    img {
      float: left;
      margin: 10px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    div {
      width: calc(100%-100px);
      float: left;
      margin: 20px 10px;
      font-size: 16px;
      span {
        margin-top: 10px;
        display: block;
        font-size: 12px;
        color: #bfbfbf;
      }
    }
    button {
      float: right;
      display: block;

      margin: 20px 10px;
      text-align: center;
      border: 1px solid #bfbfbf;
      border-radius: 25px;
      padding: 10px;
      color: #bfbfbf;
    }
  }
  .mainButton {
    margin-left: 90px;
    img {
      margin-top: 10px;
      height: 180px;
    }
  }
}
</style>
